import { ref, computed, unref } from 'vue';
import { createPageContext } from '/@/hooks/component/usePageContext';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';

const headerHeightRef = ref(0);
const footerHeightRef = ref(0);

export function useLayoutHeight() {
    function setHeaderHeight(val) {
        headerHeightRef.value = val;
    }
    function setFooterHeight(val) {
        footerHeightRef.value = val;
    }
    return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
}

export function useContentViewHeight() {
    const contentHeight = ref(window.innerHeight);
    const pageHeight = ref(window.innerHeight);
    const getViewHeight = computed(() => {
        return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0;
    });

    useWindowSizeFn(
        () => {
            contentHeight.value = window.innerHeight;
        },
        100,
        { immediate: true },
    );

    async function setPageHeight(height: number) {
        pageHeight.value = height;
    }

    createPageContext({
        contentHeight: getViewHeight,
        setPageHeight,
        pageHeight,
    });
}
